<template>
  <div style="">
    <el-form ref="formData" :rules="rules" :model="temp" label-position="left" label-width="150px" style="margin-left:50px;margin-right:50px;">
      <el-form-item label="公司名称" prop="CompanyName">
        <el-input v-model.trim="temp.CompanyName" placeholder="请输入公司名称" clearable :disabled="operationType === 'edit'" />
      </el-form-item>
      <el-form-item label="公司电话" prop="Telephone">
        <el-input v-model.trim="temp.Telephone" placeholder="请输入公司电话" clearable />
      </el-form-item>
      <el-form-item label="公司传真" prop="Fax">
        <el-input v-model.trim="temp.Fax" placeholder="请输入公司传真" clearable />
      </el-form-item>
      <el-form-item label="公司邮箱" prop="Email">
        <el-input v-model.trim="temp.Email" placeholder="请输入公司邮箱" clearable />
      </el-form-item>
      <el-form-item label="备注" prop="Remark">
        <el-input
          v-model.trim="temp.Remark"
          placeholder="请输入备注"
          type="textarea"
          rows="5"
        />
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer" style="text-align: center;">
      <el-button @click="cancel">
        取消
      </el-button>
      <el-button type="primary" :loading="loading" @click="createData()">
        确认
      </el-button>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { GetCompanyByID } from '@/api/Company'

export default {
  name: 'DataForm',
  props: {
    operationType: { type: String, default: '' },
    loading: { type: Boolean, default: false },
    editData: { type: Object, default: null }
  },
  data() {
    return {
      temp: {
        CompanyId: '',
        CompanyName: '',
        ParentCompanyId: '',
        CRMCompanyID: '',
        Telephone: '',
        Fax: '',
        Email: '',
        PrincipalId: '',
        PrincipalName: '',
        CompanySort: '',
        IsDelete: '',
        Enabled: '',
        Remark: '',
        CreateOn: '',
        CreateUserId: '',
        CreateBy: '',
        ModifiedOn: '',
        ModifiedUserId: '',
        ModifiedBy: ''
      },
      rules: {
        CompanyName: [{ required: true, trigger: 'blur' }]
      }
    }
  },
  watch: {
    // 监听对象
    operationType: {
      handler(newVal) {
        this.operationType = newVal
        this.getFormType() // 好像没走这个方法
      },
      deep: true
    }
  },
  mounted() {
    this.getFormType()
  },
  methods: {
    cancel() {
      this.$emit('dialogFormVisibleEmit', false)
    },
    getFormType() {
      if (this.operationType === 'edit') {
        GetCompanyByID(`companyID=${this.editData.CompanyId}`).then(res => {
          if (res.statusCode === 200) {
            Object.keys(this.temp).map(key => res.data[key] && (this.temp[key] = res.data[key]))
          }
        })
        this.temp = { ...this.temp, ...{
          ModifiedUserId: this.$store.getters.userId,
          ModifiedBy: this.$store.getters.userName,
          ModifiedOn: dayjs().format('YYYY-MM-DD HH:mm:ss.SSS')
        }}
      } else if (this.operationType === 'add') {
        // 清空表单
        this.$refs['formData'].resetFields()
        this.temp = { ...this.temp, ...{
          CreateUserId: this.$store.getters.userId,
          CreateBy: this.$store.getters.userName,
          CreateOn: dayjs().format('YYYY-MM-DD HH:mm:ss.SSS')
        }}
      }
    },
    //
    createData() {
      // return
      this.$refs['formData'].validate((valid) => {
        if (valid) {
          this.$emit('createDataEmit', this.temp)
        }
      })
    }
  }
}
</script>
